<script setup lang="ts">
  import { PropType, reactive, ref, watch } from 'vue';
  import { useBooleanStore } from '@/store';
  import { LocationTypeOption } from '@/api/les/types';
  import { done } from 'nprogress';

  const props = defineProps({
    locationTypeOptions: Array as PropType<LocationTypeOption[]>,
  });

  const showDrawer = ref<boolean>(false);
  const formRef = ref<any>();
  const booleanStore = useBooleanStore();
  const title = ref<string>('AGV库位');

  const formModel = reactive({
    id: undefined,
    locationCode: '',
    locationType: undefined,
    isOccupied: '',
    occupiedCode: '',
    locationIpPort: '',
    allocatedDate: '',
    inboundDate: '',
    outboundDate: '',
  });

  const rules = {
    locationCode: [
      {
        required: true,
        message: '请输入库位编码',
      },
    ],
    locationType: [
      {
        required: true,
        message: '请选择库位类型',
      },
    ],
    locationIpPort: [
      {
        required: true,
        message: '请输入站点地址',
      },
    ],
  };

  function afterVisibleChange(val: any) {
    if (!val) {
      booleanStore.toggleBool(1);
    }
  }

  function handleCancel() {
    formRef.value?.resetFields();
    booleanStore.toggleBool(1);
  }

  async function handleOk() {
    const res = await formRef.value.validate();
    if (res) {
      done(false);
    } else {
      booleanStore.toggleBool(1);
      done();
    }
  }

  // 监听弹框
  watch(
    () => booleanStore.boolValue,
    (newValue: boolean) => {
      if (!newValue) {
        showDrawer.value = newValue;
        return;
      }
      if (booleanStore.num === 1) {
        title.value = '新增AGV库位';
      } else {
        title.value = '修改AGV库位';
        formModel.locationCode = booleanStore.row.locationCode;
        formModel.locationType = booleanStore.row.locationType;
        formModel.locationIpPort = booleanStore.row.locationIpPort;
      }
      showDrawer.value = newValue;
    }
  );
</script>

<template>
  <a-drawer
    width="30%"
    :height="340"
    :visible="showDrawer"
    placement="right"
    @after-visible-change="afterVisibleChange"
    @cancel="handleCancel"
    @before-ok="handleOk"
  >
    <template #title> {{ title }} </template>
    <a-form ref="formRef" :model="formModel" :rules="rules">
      <a-form-item label="库位编码" field="locationCode">
        <a-input
          v-model="formModel.locationCode"
          max-length="20"
          placeholder="请输入库位编码"
        />
      </a-form-item>
      <a-form-item label="库位类型" field="locationType">
        <a-select
          v-model="formModel.locationType"
          placeholder="请选择库位类型"
          :options="props.locationTypeOptions"
        ></a-select>
      </a-form-item>
      <a-form-item label="站点地址" field="locationIpPort">
        <a-input
          v-model="formModel.locationIpPort"
          max-length="20"
          placeholder="请输入站点地址"
        />
      </a-form-item>
    </a-form>
    <!-- <template #footer>
      <div class="flex-btn">
        <a-button type="primary" @click="handleOk">确认</a-button>
        <a-button class="btn-reset" @click="handleCancel">取消</a-button>
      </div>
    </template> -->
  </a-drawer>
</template>
